import React from "react";
import { Modal } from "antd";
import { useTranslation } from "react-i18next";
import { Props } from "@/types/type";
import type { ColorPickerProps, GetProp } from "antd";
import MyTagForm from "./form";

type Color = Extract<GetProp<ColorPickerProps, "value">, string | { cleared: any }>;

const AddTag: React.FC<Props> = (props: Props) => {
  const { t } = useTranslation();
  const { open, close, editok, addok, dialog, tagdata } = props;

  //表单处理
  const handletagform = (value: any, color: Color) => {
    const newvalue = {
      ...value,
      color: color,
      id: tagdata?.id,
    };
    if (dialog === "EditTag") {
      editok(newvalue);
    } else if (dialog === "AddTag") {
      addok({ ...value, color: color });
    }
  };
  return (
    // 编辑添加标签弹窗
    <Modal
      title={dialog === "EditTag" ? t("form.edittag") : t("table.addtag")}
      footer={null}
      open={open}
      forceRender
      onCancel={close}
    >
      <MyTagForm open={open} dialog={dialog} tagdata={tagdata} handletagform={handletagform} />
    </Modal>
  );
};

export default AddTag;
